/**
 * @Author:周邱艳
 * @Date:2020/6/30
 * @Description:这是组合收益率可视化
 */
import React,{Component} from "react";
import {Card} from "antd";
import ReactEcharts from "echarts-for-react";
import axios from 'axios'

export default class ProductRate extends Component{
    //返回柱状图的配置对象
    constructor(props) {
        super(props);
        this.getCategorys()
        this.state={
            products:[],//总表
            tradeDate:[],//子表
            signn:[],//小标识名
            datanum:[],//横坐标
            totalseries:[]//可视化数据
        }
        //数据绑定
        this.getCategorys=this.getCategorys.bind(this)
        this.getOption=this.getOption.bind(this)

    }

    getCategorys = () => {
        //数据请求
        axios({
            method:"GET",
            url:"http://39.101.141.248:9527/proYields/proYieldByCombinationId",
            params:{comBaseId:this.props.fathercomBaseId}
        }).then(
            (res) => {
                //状态码判断
                if(res.data.code===200){
                    var signn = [];//初始化小标识名
                    var datanum=[]//横坐标
                    var totalseries=[]//可视化数据
                    for (let i=0;i<res.data.products.length;i++){
                        var name=res.data.products[i]["proName"]
                        var data=res.data.products[i]["proIncome"]//数据
                        //得到标识名
                        signn.push(name)
                        datanum.push(data)//横坐标
                        //得到可视化数据
                        totalseries.push({name,type:'line',data})
                    }
                    //数据更新
                    this.setState({
                        products: res.data.products,
                        tradeDate:res.data.products[0].tradeDate,
                        signn:signn,
                        datanum:datanum,
                        totalseries:totalseries
                    })
                }else if(res.data.code === 500){//状态码判断
                    this.props.history.push('/serverError')
                }

            }

        ).catch(function (error) {//异常处理
            console.log(error);
        })

    }
    //组件挂载后
    componentDidMount() {
        this.getCategorys()

    }
    //可视化
    getOption = () =>{
        return{

            tooltip: {},
            legend: {
                data:this.state.signn//小标识名
            },
            xAxis: {

                data: this.state.tradeDate//横坐标日期
            },
            yAxis: {name:"单位/元"},
            //显示数据的数组
            series: this.state.totalseries

        }

    }
    //数据渲染
    render() {

        return(
            <div style={{width:"100%",height:"90%",marginLeft:"1rem"}}>

                <Card>
                    <ReactEcharts option={this.getOption()}/>

                </Card>
            </div>
        )
    }
}

